<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <div class="image-container">
			<image src="/static/member/bg.png" mode="scaleToFill" class="responsive-image">
		</div> -->
		<scroll-view class="image-container" scroll-y :scroll-top="scrollTop" >
			<uni-nav-bar statusBar="true" :fixed="true" backgroundColor="transparent" :border="false" color="white" left-icon="left" @clickLeft="backTo"></uni-nav-bar>
			<image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/member/bg.png" class="responsive-image"></image>
		</scroll-view>

		<div class="footerBase"></div>
		<div class="footer">
			<div class="footer-button" @click="payment">开通牙荷体验官</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0
			// 页面数据可以动态绑定
		};
	},
	methods: {
		handleScroll(e) {
		      // 可以在这里处理滚动事件
		      // this.scrollTop = e.detail.scrollTop;
		    },
		backTo() {
			if (getCurrentPages().length > 1) {
			    uni.navigateBack({
			        delta: 1 // 返回上一页
			    });
			} else {
			  uni.switchTab({
			  	url: '/pages/index/index'
			  });
			}
		},
		async payment() {
			this.$post('/yahe/order/create/level', { type: 1 }).then((res) => {
				if (res.success) {
					uni.navigateTo({
						url: `/mineComponentPackage/component/payment?orderId=${res?.content?.orderId}`
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					// uni.hideLoading();
				}
				// else {
				// 	uni.showToast({
				// 		title: '获取失败，请稍后再试',
				// 		icon: 'none'
				// 	});
				// }
			}).catch((res) => {
				// uni.hideLoading();
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
			});
		}
	}
};
</script>

<style scoped lang="less">
/* 全局样式 */
.container {
	/* padding: 20px; */
	background-color: #002322;
}

.image-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 210rpx; /* 底部预留空间给固定元素 */
	overflow-y: auto; /* 启用垂直滚动 */
}
/* 头部样式 */
.header {
	text-align: center;
	margin-bottom: 20px;
}

.header .title {
	font-size: 24px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.header .subtitle {
	font-size: 18px;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.header .info {
	font-size: 14px;
	color: #666;
}

/* 内容部分样式 */
.content {
	background-color: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 每个部分的样式 */
.section {
	margin-bottom: 20px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.section-text {
	font-size: 14px;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

/* 绿色莲米应用场景样式 */
.scenes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.scene {
	background-color: #f0f0f0;
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 14px;
	color: #333;
}

.image-container {
	/* 容器高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.responsive-image {
	width: 100%;
	height: 2392rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* 保持宽高比并填充容器 */
}
.footerBase {
	height: 210rpx;
}

.footer {
	display: flex;
	    justify-content: center;
	    align-items: center;
	    text-align: center;
	    height: 210rpx;
	    background: #0c4a4f;
	    /* margin-top: 2100rpx; */
	    position: fixed;
	    bottom: 0;
	    width: 100%;

	.footer-button {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(90deg, #fecba1 0%, #fce7d2 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #4b2711;
		text-align: center;
	}
}
</style>
